import React, { Suspense, lazy } from 'react';
import Judge from '../Judge';
import { Routes, Route } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
import { selectRouter_permission } from '../redux/Slice/userSlice';
import SusLoading from '../components/SusLoading';
import Loading from '../components/Loading';
const Examine = lazy(() => import('../pages/Examine'));
const Register = lazy(() => import('../pages/Register'));
const Revise = lazy(() => import('../pages/Revise'));
const Login = lazy(() => import('../pages/Login'));
const Home = lazy(() => import('../pages/Home'));
const ModelMake = lazy(() => import('../pages/Model'));
const Welcome = lazy(() => import('../pages/Welcome'));
const DePermission = lazy(() => import('../pages/DePermission'));
const UserManager = lazy(() => import('../pages/UserManager'));
const NotFound = lazy(() => import('../components/NotFound'));
const DeConfig = lazy(() => import('../pages/DeConfig'));
const MyRegister = lazy(() => import('../pages/MyRegister'));
const InData = lazy(() => import('../pages/InData'));
const InBatch = lazy(() => import('../pages/InBatch'));
const InPresent = lazy(() => import('../pages/InPresent'));
const MyRevise = lazy(() => import('../pages/MyRevise'));
const Delete = lazy(() => import('../pages/Delete'));
const MyDelete = lazy(() => import('../pages/MyDelete'));
const UserBatch = lazy(() => import('../pages/UserBatch'));
const SaleInfo = lazy(() => import('../pages/SaleInfo'));
const ModelPlay = lazy(() => import('../pages/ModelPlay'));
const ModelCard = lazy(() => import('../components/ModelCard'));
const ProcessManager = lazy(() => import('../pages/ProcessManager'));
const DataDict = lazy(() => import('../pages/DataDict'));
const ExamineHis = lazy(() => import('../pages/ExamineHis'));
export default () => {
  const [permissionList, SetpermissionList] = useState([]);
  let router_permission = useSelector(selectRouter_permission);

  useEffect(() => {
    SetpermissionList(router_permission);
  }, router_permission);

  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Judge />}>
          <Route path="login" element={<Login />}></Route>
          <Route path="pages" element={<Home />}>
            <Route
              index
              element={
                <Suspense fallback={<SusLoading />}>
                  <Welcome />
                </Suspense>
              }
            />

            <Route
              path="MyRegister"
              element={
                <Suspense fallback={<SusLoading />}>
                  <MyRegister />
                </Suspense>
              }
            />
            <Route
              path="Register"
              element={
                <Suspense fallback={<SusLoading />}>
                  <Register />
                </Suspense>
              }
            />
            <Route
              path="Examine"
              element={
                <Suspense fallback={<SusLoading />}>
                  <Examine />
                </Suspense>
              }
            />
            <Route
              path="Revise"
              element={
                <Suspense fallback={<SusLoading />}>
                  <Revise />
                </Suspense>
              }
            />
            <Route
              path="DePermission"
              element={
                <Suspense fallback={<SusLoading />}>
                  <DePermission />
                </Suspense>
              }
            />
            <Route
              path="ModelMake"
              element={
                <Suspense fallback={<SusLoading />}>
                  <ModelMake />
                </Suspense>
              }
            />
            <Route
              path="UserManager"
              element={
                <Suspense fallback={<SusLoading />}>
                  <UserManager />
                </Suspense>
              }
            />
            <Route
              path="DeConfig"
              element={
                <Suspense fallback={<SusLoading />}>
                  <DeConfig />
                </Suspense>
              }
            />
            <Route
              path="InData"
              element={
                <Suspense fallback={<SusLoading />}>
                  <InData />
                </Suspense>
              }
            />
            <Route
              path="InBatch"
              element={
                <Suspense fallback={<SusLoading />}>
                  <InBatch />
                </Suspense>
              }
            />
            <Route
              path="InPresent"
              element={
                <Suspense fallback={<SusLoading />}>
                  <InPresent />
                </Suspense>
              }
            />
            <Route
              path="MyRevise"
              element={
                <Suspense fallback={<SusLoading />}>
                  <MyRevise />
                </Suspense>
              }
            />
            <Route
              path="Delete"
              element={
                <Suspense fallback={<SusLoading />}>
                  <Delete />
                </Suspense>
              }
            />
            <Route
              path="MyDelete"
              element={
                <Suspense fallback={<SusLoading />}>
                  <MyDelete />
                </Suspense>
              }
            />
            <Route
              path="UserBatch"
              element={
                <Suspense fallback={<SusLoading />}>
                  <UserBatch />
                </Suspense>
              }
            />
            <Route
              path="SaleInfo"
              element={
                <Suspense fallback={<SusLoading />}>
                  <SaleInfo />
                </Suspense>
              }
            />
            <Route
              path="DataDict"
              element={
                <Suspense fallback={<SusLoading />}>
                  <DataDict />
                </Suspense>
              }
            />
            <Route
              path="ExamineHis"
              element={
                <Suspense fallback={<SusLoading />}>
                  <ExamineHis />
                </Suspense>
              }
            />
            <Route
              path="ModelPlay"
              element={
                <Suspense fallback={<SusLoading />}>
                  <ModelPlay />
                </Suspense>
              }
            >
              <Route
                path=":fileName"
                element={
                  <Suspense fallback={<SusLoading />}>
                    <ModelCard />
                  </Suspense>
                }
              />
            </Route>
            <Route
              path="ProcessManager"
              element={
                <Suspense fallback={<SusLoading />}>
                  <ProcessManager />
                </Suspense>
              }
            />
            <Route
              path="*"
              element={
                <Suspense fallback={<SusLoading />}>
                  <NotFound />
                </Suspense>
              }
            />
          </Route>
        </Route>
      </Routes>
    </Suspense>
  );
};
